soy bastante nuevo en la programacion
En el siguiente ejemplo, cada vez que el componente secundario se vuelve nulo (... o en otras palabras, cuando getPosts() se vuelve nulo), quiero que la clase div del componente principal cambie de className={style.container} a className={style.container.minimized} .
¿Cuál es la forma de volver a escribir este código para que esto sea posible? Agradezco cualquier ayuda.
Tengo un componente principal como este
const Parent = () => { return ( <div className={style.root}> <div> <div className={style.container}> <Child /> </div> </div> </div> ); };El componente Mi hijo es así
const Child = () => { <div> {getPosts() ? ( <div> <p>Tomasz from {companyData.companyName}</p> <p>{getPosts()}</p> </div> ) : null} </div> }Hay varias formas de lograr el objetivo deseado.
A continuación se presenta una forma posible:
Padre
const Parent = () => { const [hasPosts, setHasPosts] = React.useState(false); return ( <div className={style.root}> <div> <div className={hasPosts ? style.container : style.container.minimized}> <Child hasPosts={hasPosts} setHasPosts={setHasPosts} /> </div> </div> </div> ); };Niño
const Child = ({hasPosts, setHasPosts, ...props}) => { // if getPosts() is an API, may choose to make the call // within useEffect hook. For simplicity, it is placed as-is below. const posts = getPosts(); if (posts) setHasPosts(true); else setHasPosts(false); return (<div> {hasPosts ? ( <div> <p>Tomasz from {companyData.companyName}</p> <p>{posts}</p> </div> ) : null} </div>); };Explicación
hasPosts y setHasPosts en padre (con useState hook)getPosts() en el niño y almacene el resultado en posts localessetHasPosts para establecer hasPosts en verdadero si hay publicaciones; de lo contrario, establecerlo como falso.posts dentro del JSX del niñohasPosts en el JSX del padre y aplique condicionalmente el estilo apropiado en el padrePD: Hay muchos recursos increíbles en Internet que explican estos detalles de una manera mucho más elegante e informativa.